<template>
  <div class="collectBox">
    <div class="collectHeader">
      <i class="el-icon-s-order" style="color: rgb(255, 103, 0)"></i>
    </div>

    <div class="Box" v-for="(items, indexOne) in $store.state.OredeData" :key="indexOne">
      <p class="order_One">
        <span style="color:orangered">订单编号：</span>
        <span>订单时间：{{ time }}</span>
      </p>
      <ul>
        <li>
          <span>商品名称</span>
          <span>单价</span>
          <span>数量</span>
          <span>小计</span>
        </li>
        <li v-for="(item, index) in $store.state.OredeData" :key="index">
          <img :src="$getImg + item.product_picture" />
          <span>{{ item.product_price }}元</span>
          <span>{{ item.product_sales }}</span>
          <span style="color: orangered">{{ item.product_price }}元</span>
        </li>
      </ul>
      <p class="good">
        <span>
          共<small style="color: orangered">{{ $store.getters.goodsNum }}</small
          >件商品
        </span>
        <span>
          合计：<strong style="color: orangered">{{ $store.getters.cont }}元</strong>
        </span>
      </p>
    </div>
    <!-- 订单为空时显示 -->
    <div class="reminder" v-show="$store.state.OredeData == ''">
      <div class="logoImg"></div>
      <div>
        <h1 class="size">您的订单还是空的！</h1>
        <p>快去下单吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      time: new Date().toLocaleString(),
    };
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.Box {
  margin-bottom: 20px;
}
.el-icon-s-order::after {
  content: "我的订单";
  color: black;
}
.order_One {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
ul {
  border: 1px solid orangered;
  border-left: none;
  border-right: none;
  li {
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #ddd;
    img {
      width: 70px;
      height: 70px;
    }
  }
  li:nth-child(1) {
    border-top: none;
  }
}
.good {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
